<template>
    <div class="gather-way width-full">
        <div class="gather-way-tap displayFlex flexCenter width-full positionR">
            <span class="flex1 back-warp" @click="$router.go(-1)">
                <span class="iconfont icon-arrows_left back"></span>
            </span>
            <div class="tap-gather-way displayFlex">
                <span class="gather-way" :class="{active:sendWay.curDeliveryType === 1}" @click="selectSendWay(1)">快递</span>
                <span class="gather-way" :class="{active:sendWay.curDeliveryType === 0}" @click="selectSendWay(0)">自提</span>
            </div>
        </div>
        <!--自提-->
        <ul class="address-items" v-if="sendWay.curDeliveryType == 0">
            <li class="address-item displayFlex" @click="selected(sendWay.curDeliveryType,key)" v-for="(value,key) in sendWay.pickupPersons">
                <span class="displayFlex flex-algin-center select-address">
                    <img class="select-img" v-if="value.selected" src="../../assets/images/cart/cart_select.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/cart/cart_not_select.png" alt="">
                </span>
                <span class="flex1">
                    <span class="displayBlock flex1 user-msg positionR">
                        <span class="displayFlex width-full justifyCtBwt flex-algin-center" :class="{'user-other-msg':false}">
                            <span class="user-name">{{value.name}}</span>
                            <span class="user-phone flex1 displayFlex">
                                <span class="phone-num displayFlex flex-algin-center">{{value.phone}}</span>
                                <span>
                                    <span class="send-way-text" v-if="value.defaultOne">默认</span>
                                    <!--<span class="send-way-text send-active">快递</span>-->
                                </span>
                            </span>
                        </span>
                         <p class="user-address text-left" v-if="value.address">
                            {{value.address}}
                         </p>
                    </span>
                </span>
                <span class="edit-adress positionR" @click.stop="editAdress(value.id)">
                    <img class="edit-icon" :class="{'pst-2px':true}" src="../../assets/images/order/edit.png" alt="">
                </span>
            </li>
        </ul>
        <!--快递-->
        <ul class="address-items" v-if="sendWay.curDeliveryType == 1">
            <li class="address-item displayFlex" @click="selected(sendWay.curDeliveryType,key)" v-for="(value,key) in sendWay.receivePersons">
                <span class="displayFlex flex-algin-center select-address">
                    <img class="select-img" v-if="value.selected" src="../../assets/images/cart/cart_select.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/cart/cart_not_select.png" alt="">
                </span>
                <span class="flex1">
                    <span class="displayBlock flex1 user-msg positionR">
                        <span class="displayFlex width-full justifyCtBwt flex-algin-center" :class="{'user-other-msg':false}">
                            <span class="user-name">{{value.name}}</span>
                            <span class="user-phone flex1 displayFlex">
                                <span class="phone-num displayFlex flex-algin-center">{{value.phone}}</span>
                                <span>
                                    <span class="send-way-text" v-if="value.defaultOne">默认</span>
                                    <!--<span class="send-way-text send-active">快递</span>-->
                                </span>
                            </span>
                        </span>
                        <p class="user-address text-left" v-if="value.address">
                            {{value.address}}
                        </p>
                    </span>
                </span>
                <span class="edit-adress positionR" @click.stop="editAdress(value.id)">
                    <img class="edit-icon" :class="{'pst-2px':true}" src="../../assets/images/order/edit.png" alt="">
                </span>
            </li>
        </ul>
        <button class="detail-btn add-btn" @click="addNewContact" >+新增联系人信息</button>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        name: "GatherWay",
        data(){
            return{
                // sendWay:{
                    // "curDeliveryType": 0,            //----------当前配送类型  0：自提   1：快递
                    // "supportExpress": false,         //----------是否支持快递，否的话，快递菜单栏置灰
                    // "pickupPersons": [{               //----------自提取货人列表
                    //     "id":45,                     //-------配送ID
                    //     "name":"启明",               //-------取货人名字
                    //     "phone":"15919467391",       //-------取货人手机号码
                    //     "defaultOne":true,           //-------是否默认
                    //     "selected":true              //-------是否当前选择
                    // }],
                    // "receivePersons": [{                 //----------快递收货人列表
                    //     "id":45,                        //-------配送ID
                    //     "name":"启明",                  //-------收货人名字
                    //     "phone":"15919467391",          //-------收货人手机号码
                    //     "address":"田贝三路明阳酒店",  //-------收货地址
                    //     "defaultOne":true,              //-------是否默认
                    //     "selected":true                 //-------是否当前选择
                    // }]
                // },
                curDeliveryType:0,
            }
        },
        mounted(){
            this.curDeliveryType = this.sendWay.curDeliveryType;
            // this.init();
        },
        computed:{
            ...mapGetters({'sendWay':'getSendWayMsg'}),
            // sendWay(){
            //     return this.$store.getters.getSendWayMsg
            // }
        },
        methods:{
            init(){
                this.sendWay = Object.assign({},this.sendWay,this.$store.getters.getSendWayMsg);
            },
            /*选择配送方式*/
            selectSendWay(curDeliveryType){
                if( !this.sendWay.supportExpress && curDeliveryType == 1){
                    this.$root.$emit('toast',{'msg':'此订单不支持快递'})
                    return false;
                }
                this.sendWay.curDeliveryType = curDeliveryType;
                this.$store.commit('editSendWay',this.sendWay)
            },
            selected(curDeliveryType,index){
                let that = this;
                let sureOrder = {};
                this.sendWay.curDeliveryType = curDeliveryType;
                /*其他的选项先全部制空*/
                for(let value in that.sendWay){
                    if(value == 'receivePersons' && Array.isArray(that.sendWay.receivePersons) && that.sendWay.receivePersons.length > 0 ){
                        that.sendWay.receivePersons.forEach((value,receivePersonsIndex)=>{
                            that.sendWay.receivePersons[receivePersonsIndex].selected = false;
                        })
                    }else if(value == 'pickupPersons' && Array.isArray(that.sendWay.pickupPersons) && that.sendWay.pickupPersons.length > 0){
                        that.sendWay.pickupPersons.forEach((value,pickupPersonsIndex)=>{
                            that.sendWay.pickupPersons[pickupPersonsIndex].selected = false;
                        })
                    }
                }
                this.sendWay.curDeliveryType = curDeliveryType;
                /*自提*/
                if(curDeliveryType == 0){
                    this.sendWay.pickupPersons[index].selected = true;
                    /*确认订单数据的修改*/
                    sureOrder = {
                        "deliveryType": that.sendWay.curDeliveryType,                      //-------配送类型  0:自提  1:快递
                        "deliveryId": this.sendWay.pickupPersons[index].id,                          //-------当前的配送ID
                        "deliveryName": this.sendWay.pickupPersons[index].name,                   //-------配送人姓名
                        "deliveryPhone": this.sendWay.pickupPersons[index].phone,         //--------配送人手机号码
                    };
                /*快递*/
                }else if(curDeliveryType == 1){
                    this.sendWay.receivePersons[index].selected = true;
                    /*确认订单数据的修改*/
                    sureOrder = {
                        "deliveryType": that.sendWay.curDeliveryType,                      //-------配送类型  0:自提  1:快递
                        "deliveryId": this.sendWay.receivePersons[index].id,                          //-------当前的配送ID
                        "deliveryName": this.sendWay.receivePersons[index].name,                   //-------配送人姓名
                        "deliveryPhone": this.sendWay.receivePersons[index].phone,         //--------配送人手机号码
                    };
                }
                this.$store.commit('editSureOrder',sureOrder);
                this.$store.commit('editSendWay',this.sendWay);
                // this.$router.push('/order/sure');
                window.location.href = '/order/sure'
            },
            /*修改地址*/
            editAdress(editId){
                /*adressType,表示修改配送方式还是添加配送方式*/
                this.$router.push({path:'/order/addAdress',query:{selectedId:editId,selectedType:this.sendWay.curDeliveryType}});
            },
            /*添加新的联系人*/
            addNewContact(){
                this.$router.push({path:'/order/addAdress',query:{selectedType:this.sendWay.curDeliveryType}});
            }
        },
        watch:{
            // 'this.$store.getters.getSendWayMsg'(val){
            //     console.log(val)
            //     this.sendWay = Object.assign({},this.sendWay,val);
            // }
        }
    }
</script>

<style scoped lang="scss">
    .gather-way{
        display: inline-block;
        border-radius: .25rem;
        width: .5rem;
        height: .27rem;
        font-size: .13rem;
        color: #5D89E8;
        text-align: center;
        line-height: .27rem;
    }
    .gather-way-tap{
        padding: .11rem 0 ;
        border-bottom: 1px solid #F0F0F0;
    }
    .disabled.tap-gather-way{
        color: #fff;
        background-color: #ccc;
        border: 0;
        .gather-way{
            color: #fff;
        }
    }
    .back-warp{
        position: absolute;
        left: .15rem;
        top: 0;
        bottom: 0;
        line-height: .5rem;
        margin: auto;
    }
    .tap-gather-way{
        border-radius: .25rem;
        width: 1rem;
        height: .27rem;
        border: 1px solid #5D89E8;
    }
    .gather-way.active{
        color: #fff;
        background-color: #5D89E8;
    }
    .select-img{
        position: relative;
        width: .16rem;
        top: .01rem;
    }
    .send-way-text {
        margin-left: .15rem;
        background-color: rgba(153, 153, 153, .2);
        color: #999;
        font-size: .12rem;
        display: inline-block;
        width: .34rem;
        height: .15rem;
        text-align: center;
        line-height: .16rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }
    .back{
        font-size: .28rem;
        color: #999;
    }
    .address-items{
        margin: 0 .15rem;
    }
    .address-item{
        border-bottom: 1px solid #F0F0F0;
        padding:  .15rem 0;
    }
    .edit-adress{
        display: inline-block;
        width: .48rem;
    }
    .edit-icon{
        width: .2rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .user-address {
        font-size: .13rem;
        color: #999;
        line-height: .24rem;
    }

    .user-name {
        color: #333;
        font-size: .14rem;
        font-weight: bold;
    }
    .user-phone{
        padding-left: .28rem;
    }
    .send-way-text {
        background-color: rgba(153, 153, 153, .2);
        color: #999;
        font-size: .12rem;
        display: inline-block;
        width: .34rem;
        height: .15rem;
        text-align: center;
        line-height: .16rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }

    .send-way-text.send-active {
        background-color: rgba(109, 145, 223, .2);
        color: #6D91DF;
    }
    .select-address{
        width: .45rem;
        text-align: center;
    }
    .user-other-msg{
        padding-bottom: .1rem;
    }
    .detail-btn{
        width: 90%;
        margin-top: .26rem;
        height: .4rem;
        text-align: center;
        line-height: .4rem;
        font-size: .14rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        color: #fff;
    }
    .add-icon{
        transform: scale(.8);
    }
    .add-btn{
        background-image: linear-gradient(to right,#9EBDFF,#5D89E8);
    }
    .phone-num{
        color: #333;
    }
    .pst-2px{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>